<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/js/elementui/index.css">
    <link rel="icon" href="data:;base64,=">
    <title>Title</title>
</head>
<body>
<div id="app">
    <template>
        <el-button type="primary" @click="openTree">角色授权</el-button>
        <el-table
                ref="tableCheck"
                @current-change="handleSelectionChange"
                :data="tableData"
                style="width: 100%"
                @select-all="selectAll"
                @select="handleSelectionChangeOne">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="id"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="用户名"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.username }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="密码"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.password }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="realname"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.realname }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="orgId"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.orgId }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="salt"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.salt }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="电话"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.telephone }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="icon"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.icon }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="state"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.state }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="createTime"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="updateTime"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="createUserId"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.createUserId }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="updateUserId"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.updateUserId }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="siteId"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.siteId }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="danger" @click="open">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :page-count="total"
            @current-change="loadPage">
    </el-pagination>
    <!--角色树-->
    <el-dialog title="商品详情" :visible.sync="dialogTreeVisible">
        <el-tree
                @check="setTreeNodes"
                :data="roles"
                show-checkbox
                default-expand-all
                node-key="id"
                ref="tree"
                highlight-current
                :props="defaultProps"
        >
        </el-tree>
    </el-dialog>
</div>
</body>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:'#app',
        data() {
            return {
                current:null,
                curr:1,
                pageSize:7,
                total:0,
                tableData:null,
                dialogTreeVisible:false,
                dialogFormVisible:false,
                roles:null,
                defaultProps: {
                    label: 'name'
                }
            }
        },
        methods: {
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            loadPage(curr) {
                this.curr = curr;
                axios.get("/users?curr=" + this.curr)
                    .then(value => {
                        if (value.data.code == 1) {
                            this.tableData = value.data.data.records;
                            this.total = value.data.data.total;
                            this.curr = value.data.data.current;
                            this.pageSize = value.data.data.size;
                        }
                    })
            },
            //单选控制器
            handleSelectionChangeOne(section, row) {
                this.current = row;
                this.$refs.tableCheck.clearSelection();
                this.$refs.tableCheck.toggleRowSelection(row);
            },
            handleSelectionChange(row) {
                this.current = row;
                this.$refs.tableCheck.clearSelection();
                this.$refs.tableCheck.toggleRowSelection(row);
            },
            //全选控制器
            selectAll() {
                this.$refs.tableCheck.clearSelection();
            },
            //打开角色树
            openTree(){
                if (this.current!=null){
                    axios.get("/roles/user/"+this.current.id).then(value => {
                        if (value.data.code==1){
                            this.dialogTreeVisible=true;
                            this.$refs.tree.setCheckedKeys(value.data.data);
                        }
                else {
                    this.$message("请选择角色")
                }
                })
                }
            },
            //控制角色树选择
            setTreeNodes(data,row){
                //新增
                if (row.checkedKeys.indexOf(data.id)!=-1){
                    axios.post("/userRole",{userId:this.current.id,roleId:data.id})
                        .then(value => {
                            if (value.data.code==1){
                                this.$message("添加成功")
                            }else {
                                this.$message("添加失败");
                                this.$refs.tree.setCheckedKeys(row.checkedKeys.remove(data.id));
                            }
                        })
                }else {
                    axios.delete("/userRole/"+this.current.id+"/"+data.id)
                        .then(value => {
                            if (value.data.code==1){
                                this.$message("删除成功")
                            }else {
                                this.$message("删除失败")
                                this.$refs.tree.setCheckedKeys(row.checkedKeys.add(data.id));
                            }
                        })
                }
            },
            open() {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("/user/"+this.current.id).then(value => {
                        if (value.data.code==1){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.loadPage(1);
                        }else {
                            this.$message("删除失败")
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
        mounted() {
            this.loadPage(1);
            axios.post("/roles").then(value => {
                if (value.data.code==1) {
                    this.roles = value.data.data;
                }
            })
        }
    })
</script>
</html>